import React, { Component } from 'react';
import IceContainer from '@icedesign/container';
import { Checkbox, Loading, Button, Icon, Grid, Feedback, Card, Affix, Dialog } from '@icedesign/base';
import { Link } from "react-router-dom"
import axios from 'axios'
import IceTitle from '@icedesign/title';
import IceIcon from '@icedesign/icon';
import IceLabel from '@icedesign/label'
const ButtonGroup = Button.Group;
import cookie from 'react-cookies'
import '../../ArticleRead.scss'

const footer = (
  <dir>
    <Link to='/login'>
      <Button type='primary'>
        去登录！
      </Button>

    </Link>
    <Link to='/login'>
      <Button type='primary'>
        还是去登录！
      </Button>
    </Link>
  </dir>
);
const { Row, Col } = Grid;
export default class TermsInfo extends Component {
  static displayName = 'TermsInfo';

  constructor(props) {
    super(props);
    const { total } = this.props
    this.state = {
      dataSource: null,
      current: parseInt(this.props.id),
      visible: false,
    };
  }

  componentWillMount() {

    this.getData()

  }
  back = (current) => {
    const { total } = this.props
    if (current < parseInt(this.props.total)) {
      this.setState({
        current: current + 1
      })
      this.props.history.push(`/article/read/${parseInt(current) + 1}/${total}`)
      this.getData(current + 1)
    }
    else
      Feedback.toast.error("已经是第一篇啦~~~")
  }
  next = (current) => {
    const { total } = this.props
    if (parseInt(this.state.current) - 1 > 0) {

      this.setState({
        current: current - 1
      })
      this.props.history.push(`/article/read/${parseInt(current) - 1}/${total}`)
      this.getData(current - 1)
    } else
      Feedback.toast.error('已经是最后一篇啦~~~')

  }
  getData = (pid) => {
    let id = this.props.id;
    if (pid != null)
      id = pid;
    axios.get(` http://zzuisa.cn/reader/article/get/${id}`).then((res) => {

      if (res.data.code === 0) {
        this.setState({
          dataSource: res.data.data
        })
      }
    })
  }
  render() {
    const article = this.state.dataSource

    console.log('this.', article)
    return (
      <IceContainer>
        {
          article != null ?
            <div>
              <Affix offsetTop={30}>
                <Button type="secondary" onClick={() => { this.props.history.push('/article') }}> 返回</Button>
                <br /><br />
                {article.author === cookie.load('username') ?
                  <Button type="secondary" onClick={() => { this.props.history.goBack() }}> 修改</Button>
                  : ""
                }
              </Affix>
              <div>
                <Row>
                  <Col offset={3} span={18} >
                    <Card style={{ width: '100%', margin: '0 auto', align: 'center' }} bodyHeight='auto'>
                      <IceLabel style={{ fontSize: '28px', margin: '15px', padding: '15px' }} inverse={false} status="primary">{article.aname}</IceLabel>
                      <div style={styles.infoItem}>
                        <IceLabel style={{ backgroundColor: '#e4e2fa', color: '#7265e6', fontSize: '18px' }}>{article.author}</IceLabel>
                        <IceLabel style={{ backgroundColor: '#fde3cf', color: '#f56a00', fontSize: '18px' }}>{article.createtime}</IceLabel>
                      </div>
                    </Card>
                  </Col>
                </Row>
                <Card>
                  <div className="strong" style={{ fontSize: '18px', margin: '145px' }}
                    dangerouslySetInnerHTML={
                      { __html: `${article.acontent}` }
                    } />
                  <div>
                    <Affix offsetBottom={45}>
                      <Button size="large" style={{ float: 'left' }} type="primary" align='left' onClick={() => this.back(this.state.current)}>
                        <Icon type="arrow-left" />
                      </Button>
                    </Affix>
                    <Affix offsetBottom={45}>
                      <Button size="large" style={{ float: 'right' }} type="primary" align='right' onClick={() => this.next(this.state.current)}>
                        <Icon type="arrow-right" />
                      </Button>
                    </Affix>
                  </div>
                </Card>
              </div>

            </div> : (this.state.visible == false ? setTimeout(() => {
              this.setState({
                visible: true
              })
            }, 1000) : null,
              < Dialog
                visible={this.state.visible}
                footer={footer}
                title="警告"
              >
                <h3 style={{ color: 'red' }}><b>您的登录凭证已过期</b></h3>
                <ul>
                  <li>您可以选择:</li>
                </ul>
              </Dialog>)

        }
      </IceContainer >
    );
  }
}

const styles = {
  desc: {
    fontSize: '13px',
    lineHeight: '28px',
  },
  title: {
    textAlign: 'center',
    margin: 0,
    paddingBottom: '20px',
    fontSize: '22px',
    borderBottom: '1px solid #dedede',
  },
  content: {
    color: '#666',
    fontSize: '18px',
    padding: '20px 0',
    borderBottom: '1px solid #dedede',
  },
  btn: {
    textAlign: 'center',
  },
  infoItem: {
    fontSize: '20px',
    margin: '15px',
    padding: '15px'
  }
};
